import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

/*
  路由模式
    history / hash模式的区别？
      1. 美观：history更美观，hash路径带#，更难看
      2. 兼容性: history模式兼容性更差，hash兼容性更好
        可以通过 can i use 网站查阅前端兼容性问题
      3. 原理：
        history 默认通过 history.pushState等方法完成路由跳转
                通过 history.change 事件监听历史记录的变化
        hash  默认通过 location.hash 等方法完成路由跳转
              通过 hashchange 事件监听历史记录的变化
      4. history模式刷新出现404，hash不会

*/
// import Home from "../views/Home/index.vue";
// import About from "../views/About/index.vue";
// import Detail from "../views/Detail/index.vue";

/*
  路由懒加载：  
    1. 打包代码会将每个路由组件打包成一个单独js文件
    2. 按需加载（需要使用这个路由组件才会加载这个js文件）
*/
const Home = () => import("../views/Home/index.vue");
const About = () => import("../views/About/index.vue");
const Detail = () => import("../views/Detail/index.vue");

const router = createRouter({
  // 路由模式：
  history: createWebHistory(), // history模式
  // history: createWebHashHistory(), // hash模式
  // 路由配置项
  routes: [
    {
      name: "Home",
      path: "/home",
      component: Home,
      meta: {
        title: "首页",
      },
    },
    {
      name: "About",
      path: "/about",
      component: About,
      meta: {
        title: "关于",
      },
    },
    {
      name: "Detail",
      path: "/detail/:id",
      component: Detail,
      meta: {
        title: "详情",
      },
    },
    // {
    //   path: "/",
    //   redirect: "/home",
    // },
    {
      // vue2中 path: "*"匹配任意地址
      // vue3：
      path: "/:pathMatch(.*)*",
      redirect: "/home",
    },
  ],
});

/*
  路由导航守卫：
    1. 全局路由导航守卫
      beforeEach
        权限控制（权限管理）
      beforeResolve
      afterEach
    2. 路由独享导航守卫

    3. 组件独享导航守卫
*/

router.beforeEach((to, from, next) => {
  /*
    from 从哪来的路由对象
    to 要去的路由对象
    next 函数，必须要调用
      next() 直接调用。去to对应路由地址
      next('/xxx') 去其他路由   
  */
  console.log(from, to);

  next();
});

export default router;
